<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="shortcut icon" href="#" />
	<link rel="stylesheet" type="text/css" href="{{pluResPath}}html/covid19Real/covid19Real.css" />
	<link rel="preload" href="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js" as="script" />
</head>

<body>
	<div class="container" id="container">
		<div class="title">
			<div class="area">
				<span>地区：{{areaname}}</span>
				<div class="time">
					<span>{{time}}</span>
				</div>
			</div>
		</div>

		<div class="all">
			{{if dangerousAreas}}
			<div class="tab_lable">
				{{if dangerousAreas.lowLevel}}
				<span style="color: {{dangerousAreas.lowColor}}">{{dangerousAreas.lowLevel}}</span>
				{{/if}}
				{{if dangerousAreas.highLevel}}
				<span>高风险地区</span>
				<span style="color: {{dangerousAreas.highColor}}">{{dangerousAreas.highLevel}}</span>
				<span>个。</span>
				{{/if}}
				{{if dangerousAreas.midLevel}}
				<span>中风险地区</span>
				<span style="color: {{dangerousAreas.midColor}}">{{dangerousAreas.midLevel}}</span>
				<span>个。</span>
				{{/if}}
			</div>
			{{/if}}
			{{each topdataList data idx}}
			{{if idx%3 == 0}}
			<div class="contentp">
				{{/if}}
				<div class="item">
					<p>{{data.total_desc}}</p>
					<p class="itemdown" style="color: {{data.text_color}}">{{data.total_num}}</p>
				</div>
				{{if idx%3 == 2 || idx == topdataList.length - 1}}
			</div>
			{{/if}}
			{{/each}}
		</div>

		<div class="data_box">
			<div class="tab_lable">{{chartName1}}</div>
			<div id="chartContainer"></div>
		</div>
		<div class="data_box">
			<div class="tab_lable">{{chartName2}}</div>
			<div id="chartContainer2"></div>
		</div>
		<div class="tips">* 趋势图数据更新至前一日</div>
		{{if bdevents.length>0}}
		<div class="data_box">
			<div class="tab_lable">疫情最新相关情况</div>
			<ul class="timeline">
				{{each bdevents event}}
				<li class="event">
					<h3 class="event_day">{{event.create_time}}</h3>
					<p>{{event.title}}</p>
				</li>
				{{/each}}
			</ul>
		</div>
		{{/if}}

		<div class="logo">Created By Yunzai-Bot & suiyue-plugin</div>

	</div>
</body>
<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>
	const { Line } = G2Plot;

	// const chartData1 = JSON.parse(`{{@ chartData1}}`);

	const chartData = JSON.parse(`{{@ chartData}}`);

	const Line1 = new Line("chartContainer", {
		data: chartData[0].data,
		xField: "date",
		yField: "value",
		animation: false,
		smooth: true,
		padding: [40, 10, 30, 52],
		color: 'rgb(155 11 14)',

	});
	Line1.render();


	// const chartData2 = JSON.parse(`{{@ chartData2}}`);

	const Line2 = new Line("chartContainer2", {
		data: chartData[1].data,
		xField: "date",
		yField: "value",
		animation: false,
		smooth: true,
		padding: [40, 10, 30, 52],
		color: '#e57631',

	});
	Line2.render();
</script>

</html>